<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <input type="text" v-model="item"/>
    <button @click="add(item)">添加</button>
    <ul>
      <li v-for="(todo,index) in todos"
          :class="{'checked':todo.done}">
        <label>{{index +1}}.{{todo.value}}</label>
        <time>{{todo.created|date}}</time>
      </li>
    </ul>

        <Todo :total="todos.length" :done="done"/>
  </div>
</template>
<script>
  import Todo from './Todo.vue'
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-cn')
  export default {
    name :'app',
    components:{Todo},
    methods:{
  add:function(x) {
    this.todos.push({value: this.item, done: false,created: new Date().getTime()});
  }
  },

  data () {
    return {
      item:'',
      title: "vue-todos",
      todos: [{
        value: "阅读一本关与前端开发的书", done: false,
        created: Date.now()
      },
        {
          value: "补充范例代码", done: true,
          created: Date.now() + 300000
        },
        {
          value: "写心得", done: false,
          created: Date.now() - 300000
        }]
    }
  }
  , filters: {
    date(val)
    {
      return new Date(val).getHours() + ";" + new Date(val).getMinutes() + ":" + new Date(val).getSeconds();
    }
  }
    ,computed:{
      done:function(){
        var count=0;
        for(var i=0;i<this.todos.length;i++){
          if(this.todos[i].done){
            count++;
          }
        }
        return count;
      }
    }
}
</script>
<style>
  .done{
    text-decoration:line-through ;
  }
</style>

